<template>
  <div class="app-container">
    <div class="search-container">
      <el-input v-model="searchForm.name" class="search-input" placeholder="请输入菜单名称" :clearable="true" />
      <el-input v-model="searchForm.identity" class="search-input" placeholder="请输入权限标识" :clearable="true" />
      <common-select v-model="searchForm.type" name="EnumSysResourceType" placetext="请选择菜单类型" @input="getList({pageNo: 1})" />
      <el-button type="primary" icon="el-icon-search" size="small" @click="getList({pageNo: 1})">搜索</el-button>
    </div>
    <div class="function-buttons">
      <el-button v-hasPermission="['sys_resource_add']" type="primary" size="small" icon="el-icon-edit" @click="showAdd">新增</el-button>
    </div>
    <div>
      <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%" row-key="id" :tree-props="{children: 'children'}">
        <el-table-column align="center" label="#" width="80" type="index" />
        <el-table-column width="" align="center" label="菜单名称">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>

        <el-table-column width="" align="center" label="资源路径">
          <template slot-scope="scope">
            <span>{{ scope.row.url }}</span>
          </template>
        </el-table-column>

        <el-table-column width="" align="center" label="权限标识">
          <template slot-scope="scope">
            <span>{{ scope.row.identity }}</span>
          </template>
        </el-table-column>

        <el-table-column width="" align="center" label="排序">
          <template slot-scope="scope">
            <span>{{ scope.row.sort }}</span>
          </template>
        </el-table-column>

        <el-table-column width="" align="center" label="菜单类型">
          <template slot-scope="scope">
            <span>{{ scope.row.type | filterEnumSysResourceType }}</span>
          </template>
        </el-table-column>

        <el-table-column width="" align="center" label="是否显示">
          <template slot-scope="scope">
            <span>{{ scope.row.isShow | filterEnumYesNo }}</span>
          </template>
        </el-table-column>

        <el-table-column width="" align="center" label="操作人">
          <template slot-scope="scope">
            <span>{{ scope.row.operator }}</span>
          </template>
        </el-table-column>

        <el-table-column width="" align="center" label="更新时间">
          <template slot-scope="scope">
            <span>{{ scope.row.updateTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>

        <el-table-column width="100" align="center" label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status == 0" v-hasPermission="['sys_resource_edit']" type="text" @click="showUpdate(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNo" :limit.sync="listQuery.pageSize" @pagination="pageChange" />
    </div>
    <!-- todo 调整表单字段 -->
    <el-dialog title="编辑" :visible.sync="formData.formDialog" :close-on-click-modal="false">
      <el-form ref="saveForm" :model="formData.props" :rules="formData.rules" label-width="180px">
        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="formData.props.name" placeholder="请输入菜单名称" :clearable="true" />
        </el-form-item>
        <el-form-item label="权限标识" prop="identity">
          <el-input v-model="formData.props.identity" placeholder="请输入权限标识" :clearable="true" />
        </el-form-item>
        <el-form-item label="菜单类型" prop="type">
          <common-select v-model="formData.props.type" :disabled="formData.props.id!=''" name="EnumSysResourceType" placetext="请选择菜单类型" />
        </el-form-item>
        <el-form-item v-if="formData.props.type != 0 " label="" prop="parentId" style="max-height: 500px;overflow: auto">
          <el-tree
            ref="tree"
            :data="elTree.list"
            default-expand-all
            node-key="id"
            :props="elTree.defaultProps"
            :highlight-current="true"
            :expand-on-click-node="false"
            :current-node-key="currentLivingId"
            style="height:100%; margin-top:30px; background-color:#FFF;"
            @node-click="handleNodeClick"
          >
            <span slot-scope="{ node, data }" class="custom-tree-node">
              <span>
                <i :class="data.icon" />{{ data.label }}
              </span>
            </span>
          </el-tree>
        </el-form-item>
        <el-form-item v-if="formData.props.type != 2" label="资源路径" prop="url">
          <el-input v-model="formData.props.url" placeholder="资源路径" :clearable="true" />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="formData.props.sort" type="number" placeholder="请输入排序" :clearable="true" />
        </el-form-item>

        <el-form-item label="是否显示" prop="isShow">
          <common-select
            ref="EnumYesNo"
            v-model="formData.props.isShow"
            name="EnumYesNo"
            placetext="请选择显示类型"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="formData.formDialog = false">取 消</el-button>
        <el-button type="primary" :disabled="btnSubmitDisabled" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import request from '@/utils/request'
import CommonSelect from '@/components/wejoy/CommonSelect'

export default {
  name: 'SysResourceList',
  components: { Pagination, CommonSelect },
  data() {
    return {
      btnSubmitDisabled: false,
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      currentLivingId: '',
      formData: {
        formDialog: false,
        // 表单字段, 请自行删除不需要的
        props: {
          name: '',
          url: '',
          parentId: '',
          icon: '',
          sort: '',
          type: '',
          status: '',
          operator: '',
          updateTime: '',
          rootPath: '',
          isShow: '',
          identity: ''
        },
        // 表单校验规则, 默认增加了必填, 请自行限制长度或者其他修改
        rules: {
          name: this.formRules({
            required: true,
            min: 1,
            max: 100
          }),
          url: this.formRules({
            required: true,
            min: 1,
            max: 100
          }),
          parentId: this.formRules({ required: true }),
          icon: this.formRules({ required: true }),
          sort: this.formRules({
            required: true,
            min: 1,
            max: 10
          }),
          type: this.formRules({ required: true }),
          status: this.formRules({ required: true }),
          operator: this.formRules({ required: true }),
          updateTime: this.formRules({ required: true }),
          rootPath: this.formRules({ required: true }),
          isShow: this.formRules({ required: true }),
          identity: this.formRules({
            required: true,
            min: 1,
            max: 100
          })
        }
      },
      searchForm: {
        name: '',
        status: 0,
        type: '0',
        identity: ''
      },
      elTree: {
        list: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }
    }
  },
  created() {
    this.registerFilter('EnumSysResourceType');
    this.registerFilter('EnumYesNo');
    this.getList({
      pageNo: this.listQuery.pageNo
    })
  },
  methods: {
    pageChange(page) {
      this.getList({
        pageNo: page.page,
        pageSize: page.limit
      })
    },
    getList(params) {
      this.listLoading = true
      request({
        url: '/system/sysResource/getPageTreeList',
        method: 'post',
        data: {
          pageNo: params.pageNo,
          pageSize: params.pageSize ? params.pageSize : this.listQuery.pageSize,
          ...this.searchForm
        }
      }).then(res => {
        const data = res.data;
        this.list = data.rows;
        this.total = data.total;
        this.listQuery.pageNo = params.pageNo;
        this.listLoading = false;
      }, () => {
        this.listLoading = false;
      })
    },
    audit(data) {
      var _this = this;
      request({
        method: 'post',
        url: `/system/sysResource/audit?id=${data.id}`
      }).then(res => {
        _this.$message.success('审核成功');
        data.status = 1;
      })
    },
    unaudit(data) {
      var _this = this;
      request({
        method: 'post',
        url: `/system/sysResource/unaudit?id=${data.id}`
      }).then(res => {
        _this.$message.success('取消审核成功');
        data.status = 0;
      })
    },
    showAdd: function() {
      // todo 清除表单中的数据
      this.getResourceTree(null);
      this.formData.props = {
        id: '',
        name: '',
        url: '',
        parentId: '',
        icon: '',
        sort: '',
        type: '',
        status: '',
        operator: '',
        updateTime: '',
        rootPath: '',
        isShow: '1',
        identity: ''
      }
      this.formData.formDialog = true;
    },
    showUpdate: function(data) {
      this.getResourceTree(data);
      // todo 设置数据进入表单
      this.formData.props = {
        id: data.id,
        name: data.name,
        url: data.url,
        parentId: data.parentId,
        sort: data.sort.toString(),
        type: data.type.toString(),
        status: data.status,
        rootPath: data.rootPath,
        isShow: data.isShow.toString(),
        identity: data.identity
      }
      this.formData.formDialog = true;
    },
    save: function() {
      var _this = this;
      this.disableBtn(this, 'btnSubmitDisabled');
      this['$refs'].saveForm.validate(function(valid) {
        if (!valid) {
          return;
        }
        if (_this.formData.props.type === 0) {
          _this.formData.props.parentId = 0;
        }
        // todo 注意构造参数_this.formData.props
        request({
          url: '/system/sysResource/save',
          method: 'post',
          data: _this.formData.props
        }).then(res => {
          _this.$message.success('保存成功');
          _this.getList({
            pageNo: 1,
            pageSize: _this.listQuery.pageSize
          });
          _this.formData.formDialog = false;
        })
      });
    },
    getResourceTree(data) {
      var _this = this;
      request({
        method: 'get',
        url: `/system/sysResource/getResourceTree`
      }).then(res => {
        _this.elTree.list = res.data;
        if (data != null && data.type !== 0) {
          _this.currentLivingId = data.parentId;
          _this.$nextTick(function() {
            _this.$refs.tree.setCurrentKey(this.currentLivingId);
          })
        }
      })
    },
    handleNodeClick(node, data, value) {
      this.formData.props.parentId = node.id;
      this.formData.props.parentName = node.label;
    }
  }
}
</script>

<style scoped>

</style>
